import React, { Component } from 'react';
import { useState } from 'react';
import { Col, Row, Input, Button, Flex, Divider, Breadcrumb, Layout, Popover, theme, Select, Space, Table, Tag, Card, Typography } from 'antd';
import type { GetProps } from 'antd';
import NavItem from '../Tool/Navtestitem'
import HeaderComponent from '../Tool/Header';
import FeedbackModal from '../Tool/FeedbackLink';
import PdfViewer from '../Tool/PDFViewer';
import VideoPlayer from '../Tool/VideoPlayer';
import ModalWithTablem from '../Tool/Constrastapplybutton'

type SearchProps = GetProps<typeof Input.Search>;

const { Search } = Input;

const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);

const { Content, Footer } = Layout;

const { Title, Paragraph, Text, Link } = Typography;

interface DropdownOption {
  value: string;
  label: string;
  content: JSX.Element; // 使用 JSX.Element 类型来存储每个选项的内容
}

const App: React.FC = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const options: DropdownOption[] = [
    {
      value: 'option1',
      label: '操作规程1',
      content: (
        <div>
          <Flex justify='center' align='center'>
            <p style={{ fontSize: '18px', fontWeight: 'bold' }}>PDF查看:</p>
          </Flex>
          <PdfViewer pdfUrl="https://example.com/document.pdf" />
          <Divider />
          <Flex justify='center' align='center'>
            <p style={{ fontSize: '18px', fontWeight: 'bold' }}>视频查看:</p>
          </Flex>
          <Flex wrap gap="small">
            {Array.from({ length: 5 }, (_, i) => (
              <VideoPlayer videoUrl="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ" />
            ))}
          </Flex>
        </div>
      ),
    },
    {
      value: 'option2',
      label: '操作规程2',
      content: (
        <div>
          <Flex justify='center' align='center'>
            <p style={{ fontSize: '18px', fontWeight: 'bold' }}>PDF查看:</p>
          </Flex>
          <PdfViewer pdfUrl="https://example.com/document.pdf" />
          <Divider />
          <Flex justify='center' align='center'>
            <p style={{ fontSize: '18px', fontWeight: 'bold' }}>视频查看:</p>
          </Flex>
          <Flex wrap gap="small">
            {Array.from({ length: 4 }, (_, i) => (
              <VideoPlayer videoUrl="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ" />
            ))}
          </Flex>
        </div>
      ),
    },
    {
      value: 'option3',
      label: '操作规程3',
      content: (
        <div>
          <Flex justify='center' align='center'>
            <p style={{ fontSize: '18px', fontWeight: 'bold' }}>PDF查看:</p>
          </Flex>
          <PdfViewer pdfUrl="https://example.com/document.pdf" />
          <Divider />
          <Flex justify='center' align='center'>
            <p style={{ fontSize: '18px', fontWeight: 'bold' }}>视频查看:</p>
          </Flex>
          <Flex wrap gap="small">
            {Array.from({ length: 2 }, (_, i) => (
              <VideoPlayer videoUrl="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ" />
            ))}
          </Flex>
        </div>
      ),
    },
  ];

  // 使用泛型来指定 useState 的类型
  const [selectedOption, setSelectedOption] = useState<DropdownOption | null>(null);

  const handleSelect = (value: string) => {
    const selectedOption = options.find(option => option.value === value) || null;
    setSelectedOption(selectedOption);
  };

  return (
    <Layout>
      <HeaderComponent />
      <Layout>
        <NavItem defaultSelectedKey='4' />
        <Content style={{ padding: '0 48px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>检测人员</Breadcrumb.Item>
            <Breadcrumb.Item>项目</Breadcrumb.Item>
            <Breadcrumb.Item>规程</Breadcrumb.Item>
            {/*最后一面包屑内容为点击查看详情的名*/}
          </Breadcrumb>
          <div
            style={{
              background: colorBgContainer,
              minHeight: 280,
              padding: 24,
              borderRadius: borderRadiusLG,
            }}
          >
            <Row>
              <Col span={18} offset={3}>
                <Card bordered={false} style={{ marginBottom: 16 }}>
                  <Row gutter={16}>
                    <Col span={8}>
                      <Text strong>项目名称</Text>
                    </Col>
                    <Col span={8}>
                      <Text strong>标准名称</Text>
                    </Col>
                    <Col span={8}>
                      <Text strong>标准编号</Text>
                    </Col>
                  </Row>
                </Card>
                <Divider orientation="left" orientationMargin="0">
                  <Title level={4}>规程操作</Title>
                </Divider>
                <Select
                  options={options}
                  value={selectedOption?.value}
                  onChange={handleSelect}
                  style={{ width: 200 }}
                />
                <div style={{ marginTop: 16 }}>
                  {selectedOption ? (
                    <>
                      <Text strong>当前选择：{selectedOption.label}</Text>
                      <Text style={{ marginTop: 8 }}>{selectedOption.content}</Text>
                    </>
                  ) : (
                    <Text>请选择一个选项</Text>
                  )}
                </div>
                <Divider orientation="left" orientationMargin="0">
                  <Title level={4}>比对测试方案</Title>
                </Divider>
                <PdfViewer pdfUrl="https://example.com/document.pdf" />
                <Divider />
                <Flex justify='center' align='center'>
                  <ModalWithTablem />
                </Flex>
              </Col>
            </Row>
          </div>
        </Content>
      </Layout>
      <Footer style={{ textAlign: 'center' }}>
        <FeedbackModal />
        <Paragraph>版权所有 © 2024 软件项目管理 #4</Paragraph>
      </Footer>
    </Layout>
  );
};

export default App;